<template>
	<div ref="stopMachineChart" v-resize="resizeChart" style="width: 100%;height: 100%;"></div>
</template>

<script>
    import homeMixin from '../../../../mixins/dom-resize';
    import { borderColor, color, grid, legend } from './chart-conf';
    import * as echarts from 'echarts';
    import { stopTypeList } from '../../../../utils/jk/status-option-list';

    export default {
        mixins: [homeMixin],
        props: {
            chartData: {
                type: Object,
                default() {
                    return {};
                }
            },
            height: {
                type: [String, Number],
                default: 0
            }
        },
        data() {
            return {
                color: ['#2d8cf0', '#2d8cf0', '#2d8cf0', '#2d8cf0', '#2d8cf0'],
                example: null,
                borderColor: '#c5c8ce',
                stopTypeList: stopTypeList,
                option: {
                    legend: {
                        show: false,
                        right: 'right'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: [0, 65],
                            center: ['50%', '50%'],
                            itemStyle: {
                                borderRadius: 1
                            },
                            label: {
                                formatter: '{name|{b}}\n{time|{c} 台}',
                                minMargin: 5,
                                lineHeight: 15,
                                rich: {
                                    time: {
                                        fontSize: 10,
                                        color: '#999'
                                    }
                                }
                            },
                            data: [
                                { value: 5, name: '翻改停机', itemStyle: { color: '#ff9900' }},
                                { value: 33, name: '落纱停机', itemStyle: { color: '#2d8cf0' }},
                                { value: 2, name: '异常停机', itemStyle: { color: '#F95457' }},
                                { value: 1, name: '待机', itemStyle: { color: '#a97cf6' }}
                            ]
                        }
                    ]
                }
            };
        },
        methods: {
            resize() {
                window.addEventListener('resize', () => {
                    this.resizeChart();
                });
            },
            initChart() {
                this.$nextTick(() => {
                    this.example = echarts.init(this.$refs.stopMachineChart);
                    this.updateChart();
                });
            },
            updateChart() {
                this.$nextTick(() => {
                    const arr = [];
                    this.stopTypeList.forEach(x => {
                        this.chartData.machineShutdownTypeList.forEach(k => {
                            if (x.id === k.typeId) {
                                arr.push({
                                    value: k.machineCount,
                                    name: x.name,
                                    itemStyle: {
                                        color: x.color
                                    }
                                });
                            }
                        });
                    });
                    this.option.series[0].data = arr;
                    if (this.example) {
                        this.example.setOption(this.option);
                    }
                });
            }
        },
        mounted() {
            this.initChart();
            this.resize();
        },
        watch: {
            chartData: {
                handler() {
                    this.updateChart();
                },
                deep: true
            }
        }
    };
</script>
